<template>
  <div id="MusicItem">
    <van-cell
      @click="playMusic"
      class="van-ellipsis"
      center
      :label="artists + ' - ' + name"
    >
      <template #title>
        <div>{{ name }}</div>
      </template>
      <template #right-icon>
        <van-icon
          @click.stop="playVideo"
          class="rightIcon"
          :name="mvId ? 'video-o' : ''"
          color="#ccc"
        />
      </template>
      <template #icon>
        <van-image
          v-if="picUrl"
          radius="15px"
          class="musicAct"
          fit="cover"
          :src="picUrl"
        />
      </template>
    </van-cell>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'MusicItem',
  props: {
    name: {
      type: String,
      required: true
    },
    artists: {
      type: String,
      required: true
    },
    id: {
      type: Number,
      required: true
    },
    picUrl: {
      type: String
    },
    duration: {
      type: Number,
      required: true
    },
    mvId: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {}
  },
  created () {},
  computed: {
    ...mapGetters(['playMusicIndex', 'playMusicList'])
  },
  methods: {
    playVideo () {
      this.$router.push('/playMV/' + this.mvId)
    },
    playMusic () {
      const i = this.playMusicIndex + 1
      const data = {
        name: this.name,
        picUrl: this.picUrl,
        mid: this.id,
        artName: this.artists,
        duration: this.duration
      }
      if (this.playMusicList.length) {
        this.$store.commit('music/loadPlayMusicItem', { data, i })
        this.$store.commit('music/loadPlayMusicIndex', i)
      } else {
        this.$store.commit('music/loadPlayMusicList', [data])
        this.$store.commit('music/loadPlayMusicIndex', 0)
      }
      this.$store.commit('play/loadPaused', false)
    }
  }
}
</script>

<style scoped lang="less">
#MusicItem {
  text-align: left;
  .musicAct {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  .van-cell__title {
    overflow: hidden;
  }
  .rightIcon {
    font-size: 20px;
  }
}
</style>
